<template>
  <confirm 
  title="客户分配设置"
  v-model="deliverConfirm"
  :close-on-confirm="false"
  @on-confirm="onDistributeConfirm"
  @on-cancel="onCancel"
  class="distribute-client">
    <selector direction="rtl"
    title="客户移交团队"
    :options="deliverTeamOpts"
    v-model="deliverTeam"
    :class="{'weui-cell_warn':
      $v.values.deliverTeam &&
      $v.values.deliverTeam.$error}"

    placeholder-align="left">
    </selector>
    
    <selector direction="rtl"
    title="客户移交成员:"
    v-if="deliverTeam"
    :options="suidOpts"
    v-model="suid"
    :class="{'weui-cell_warn':
      $v.values.suid &&
      $v.values.suid.$error}"
    placeholder-align="right">
    </selector>
    <div class="warning-text" v-if="$v.values.$error === true">
      <template v-if="$v.values.deliverTeam && $v.values.deliverTeam.required === false">请选择移交方式</template>
      <template v-if="$v.values.suid && $v.values.suid.required === false">请选择一个成员</template>
    </div>
  </confirm>
</template>
<script>

import Cell from 'vux/src/components/cell'
import Group from 'vux/src/components/group'
import Datetime from 'vux/src/components/datetime'
import Confirm from 'vux/src/components/confirm'
import Selector from 'vux/src/components/selector'

import { validationMixin } from 'vuelidate'
import { greaterTimeNow } from '../lib/validator'
import { required, minLength } from 'vuelidate/lib/validators'

import { mapActions } from 'vuex'
import {showDialog, hideDialog} from '../lib/dialog'
import Q from 'q'

export default {
  mixins: [validationMixin],
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    deliverTeamOpts: {
      type: Array,
      default: []
    },
  },
  data () {
    return {
      values: {
        suid: '',
        deliverTeam: 0
      },
      deliverTeam: 0,
      suid: -1,
      deliverConfirm: false,
      suidOpts: [],
      members: []
    }
  },
  validations () {
    return {
      values: {
        deliverTeam: {
          required: required,
        },
        suid: {
          required: required,
        }
      }
    }
  },
  methods: {
    initCurrentDateTime () {
      var d = new Date()
      var month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
      var day = d.getDate() < 10 ? '0' + (d.getDate()) : d.getDate()
      var hours = d.getHours()
      var minutes = d.getMinutes()
      var str = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + minutes
      this.timer = str
    },
    onDistributeConfirm () {
      this.$v.values.$touch()
      if (this.$v.$error === true) return false
      // this.saveTimer()

      const params = Object.assign(
        this.members.filter(member => member.suid === this.values.suid).pop(), 
        {
          team_id: this.values.deliverTeam
        }
      )
      this.$emit('input', params)
      this.$emit('on-confirm', params)
    },
    onCancel () {
      this.deliverConfirm = false
      this.$emit('on-cancel')
    },
    isNumeric(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    },
    initSuidOpts (members) {
      let membersOpts = [{
        key: -1,
        value: '请选择顾问'
      }]
      members.forEach((member) => {
        membersOpts.push({
          key: member.suid,
          value: member.name
        })
      })
      this.suidOpts = membersOpts
    },
    ...mapActions({
      saveCustomDistributeTimer: 'saveCustomDistributeTimer',
      getTeamDetail: 'getTeamDetail'
    })
  },
  beforeMount () {
    // this.initCurrentDateTime()
  },
  mounted () {
  },
  components: {
    Cell,
    Group,
    Datetime,
    Confirm,
    Selector
  },
  watch: {
    isShow (value) {
      this.deliverConfirm = value
      console.log(this.deliverConfirm, value, 'deliverConfirm')
    },
    deliverTeam (value) {
      this.values.deliverTeam = value
      this.suidOpts = [
        {key: '', value: '顾问加载中....'}
      ]
      this.getTeamDetail({team_id: value}).then((response) => {
        console.log(response.data)
        const resData = response.data
        let suidOpts = [
          {key: -1, value: '请选择顾问'}
        ]

        if (resData.errcode === 0) {
          const team = resData.results
          team.team_managers.forEach(member => {
            suidOpts.push({
              key: member.suid,
              value: member.name + '(主)'
            })
          })
          team.team_members.forEach(member => {
            suidOpts.push({
              key: member.suid,
              value: member.name + '(顾)'
            })
          })

          this.members = team.team_managers.concat(team.team_members)
          this.suidOpts = suidOpts
        } 

        this.suidOpts = suidOpts
      }).catch ((e) => {
        console.log(e)
        this.suidOpts = [
         {key: -1, value: '顾问加载失败，请联系管理员'}
        ]
      })
    },
    deliverTeamOpts (value) {
      if (value.length && !this.deliverTeam) {
        this.deliverTeam = value[0].key
      }
    },
    suid (value) {
      console.log(value, 'suid')
      if (this.isNumeric(value)) this.values.suid = value > 0 ? value : ''
    },
    members (value) {
      this.initSuidOpts(value)
    }
  }
}
</script>

<style lang="less">
.distribute-client {
  .vux-no-group-title {
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }

  .weui-cell__ft {
  }

  .warning-text {
    color: red;
    font-size: 12px;
  }
}
</style>
